<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>

		<!-- 
		  API(Application Program Interface)被定义为应用程序可用以与计算机操作系统交换信息和命令的标准集
		  应用程序接口（一些定义好的方法）
		  
		  1.什么是ajax
		    Ajax即Asynchronous Javascript And XML（异步JavaScript和XML）,前后端交互的一种技术
		  2.使用ajax
		    >>创建XMLHTTPRequest对象
			>>配置请求信息 xhrReq.open(method, url, async);
			  >>method(请求方式):GET、POST、PUT、DELETE
			  >>url(表示要向其发送请求的 URL)
			  >>async:默认true(异步)，false(同步)
			>>发送请求send() 方法用于发送 HTTP 请求
			>>接收响应
			  
		-->
		<div></div>
		<button>ajax请求</button>
		<button id="code">获取验证码</button>
		<script type="text/javascript">
			document.querySelector('#code').addEventListener('click',function(){
				var xhr = new XMLHttpRequest();
				xhr.open("post", "https://api.apiopen.top/api/sendVerificationCode");
				// xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
				xhr.setRequestHeader("Content-Type","application/json");
				xhr.send('{"mail":"zhanzhongxin@boweifeng.com"}');
				xhr.onreadystatechange = function() {
					if (xhr.readyState == 4 && xhr.status == 200) {
						var a = xhr.responseText;
						console.log(a);
					}
				}
			})
			document.querySelector('button').addEventListener('click', function() {
				//创建XMLHttpRequest对象
				var xhr = new XMLHttpRequest();
				//配置请求信息(请求方式，请求URL)
				xhr.open("get", "myjson.json");
				//发送请求
				xhr.send();
				//注册事件
				xhr.onreadystatechange = function() {
					if (xhr.readyState == 4 && xhr.status == 200) {
						//json格式字符串
						var jsonStr = xhr.responseText;
						console.log(jsonStr);
						//转成js对象
						// var jsonObj = JSON.parse(jsonStr);
						// var div = document.querySelector('div');
						// // div.innerHTML = jsonObj.result.name;
						// const {result} = jsonObj;
						// div.innerHTML = result.name;
					}
				}
			})
		</script>
	</body>
</html>
